<template>
    <div>
        <button @click="handler">点击我修改数据</button>
        <h1>学习vue3组合式API函数之setup---{{ count }}</h1>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
//vue3提供的一个函数,用来它组件配置对象,添加ts类型
//setup,组合式API函数
export default defineComponent({
    name: 'App',
    //1:组件上来setup函数立即执行一次
    //2:setup函数体内部没有this,因为执行的时机比beforeCreate都早
    //3:setup函数,函数体需要返回一个对象,对象的属性|方法,可以提供给模版使用(组件实例)-->类似于data与methods结合体
    //4:setup函数不能与async关键字一起使用[Promise对象]
    setup() {

        const state = {
            count: 2,
            handler() { 
                //注意:数据虽然发生变化但是页面不会更新
                //因为count不是响应式的属性
                state.count+=2;
                console.log(state);
            }
        }

        return state;
    },
})
</script>
<style></style>